<div data-bind="if: showBrowserAlert(), css: { 'browser-alert': showBrowserAlert() }">
    <div class="browser-message">
        <i class="icon-unsupported-browser icon-xl"></i>
        <p class="lead margin-bottom">This browser is not supported and some features may not work correctly</p>
        <p>To ensure best experience please use:</p>
        <div class="browser-links">
            <a class="chrome" href="https://www.google.com/chrome/" target="_blank">
                <i class="icon-chrome icon-lg"></i>
                Google Chrome
            </a>
            <a class="firefox" href="https://www.mozilla.org/firefox/" target="_blank">
                <i class="icon-firefox icon-lg"></i>
                Mozilla Firefox
            </a>
        </div>
        <p class="margin-bottom">Or</p>
        <button class="btn btn-default" data-bind="click: continueWithCurrentBrowser">Continue with current browser</button>
        <div data-bind="if: infoPersistedInSettings">
            <div class="checkbox">
                <input id="dontShowAgainBrowser" class="styled" type="checkbox" data-bind="checked: dontShowBrowserAlertAgain">
                <label for="dontShowAgainBrowser">
                    Don't show again
                </label>
            </div>
        </div>
    </div>
    <div class="backdrop show"></div>
</div>
